<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>语音播报</title>
<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/easyui/easyui.css'}">
<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/easyui/color.css'}">
<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/easyui/icon.css'}">
<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/form.css'}">
<style>
	.titleli{
		border-bottom:1px solid #ccc;
		width:100%;
		text-decoration:none;
		line-height:30px;
		background-color:rgb(250, 250, 250);
		list-style:none;
		color:#6197cc !important;
		float:left;
	}
	.titlespan{
		font-size:12px;
		margin-left:10px;
		cursor:pointer;
		-moz-user-select:none;
	}
	.titleimg{
		float:right;
		margin-top:10px;
		margin-right:10px;
		cursor:pointer;
	}
	.textbox-icon{
		height:28px !important;
	}
	.textbox-text{
		vertical-align: middle !important;
		font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif !important;
		color: #737373;
	}
	.combo{
		margin-left:10px;
		border-radius: 0px;
		height:25px !important;
	}
	a{
		text-decoration:none;
		color:#6197cc;
	}
	ul{
		-webkit-padding-start: 0px;
		-moz-padding-start: 0px;
		padding:0px;
		margin:0px;
	}
	.active{
		background-color: #eceeed !important
	}
	.textarecss{
		background-color:rgb(250, 250, 250)
	}
	.openMouseClass{
		cursor:pointer;
	}
	.colseMouseClass{
		cursor:not-allowed;
		color:#ffffff;
	}
</style>
</head>
<body class="zitifont">
	<div class="col-xs-12">
		<div class="col-xs-9" style="min-height:500px">
			<div class="col-xs-12" style="margin-top:5px;padding-left:31px">
				<div class="col-xs-3">
					<span style="font-size:18px;width:100px;color:#6197cc">语音合成文本</span>
				</div>
				<div class="col-xs-4">
					<span style="font-size:14px;width:100px;color:#737373;">音色</span>
					<input type="text" class="form-control" id="tone" style="width:40%">
				</div>
				<div class="col-xs-4">
					<span style="font-size:14px;width:100px;color:#737373">语速</span>
					<input type="text" class="form-control" id="speed" style="width:40%">
				</div>
				<div class="col-xs-12" style="margin-top:11px">
					<div class="col-xs-12">
						<textarea class="col-xs-11 form_control textarecss" id="content" style="font-size:16px;min-height:450px;background-color: #e7e7e7"></textarea>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xs-3" style="min-height:500px">
			<div class="col-xs-12" style="margin-top:5px;padding-left:5px">
					<span class="col-xs-12" style="font-size:18px;width:120px;color:#6197cc">常见播报内容</span>
					<input type="hidden" id="firstKey" value="${firstKey}">
					<div class="col-xs-11" style="border:1px solid #D4D4D4;;background-color: #fcfcfc;height:450px;margin-top:15px;overflow-y:scroll" >
						<ul class="shaixuan">
							#{list items:casts,as:"word"}
									<li class="titleli " id="${word?.id}" onselectstart="return false;" onclick="changeContent('${word?.id}')">
										<span class="titlespan" >${word?.title}</span>
										<img src="@{'/public/images/icon_delete.png'}" class="titleimg" onclick="delkeyword('${word?.id}')">
									</li>
							#{/list}
						</ul>
					</div>
			</div>
		</div>
		<div class="col-xs-12" style="margin-top:30px">
			<div class="col-xs-3" style="margin-left:80px">
				<input type="image" src="@{'/public/images/button_broadcast_start.png'}" class="openMouseClass" id="begin" onclick="beginBroad()" />
			</div>
			<div class="col-xs-3">
				<input type="image" src="@{'/public/images/button_broadcast_clear.png'}" class="openMouseClass" id="clear" onclick="clearBroad()" />
			</div>
			<div class="col-xs-3">
				<img  src="@{'/public/images/button_text.png'}" style="cursor:pointer" onclick="saveTextBtn()">
			</div>
		</div>
	</div>
	
	<div id="jquery_jplayer_1">
	</div>
	<!-- <button id="pause" onclick="pauseBroad()">暂停</button>
	<button id="pause" onclick="playBroad()">继续</button> -->
</body>
<script type="text/javascript" src="@{'/public/javascripts/layout/jquery-1.8.2.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/layout/jquery.easyui.min.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/layout/easyui-lang-zh_CN.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/layout/Validator.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/layout/common.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/layout/dateFormat.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/layout/jquery.jplayer.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/layout/uuid.js'}"></script>
<script type="text/javascript" src="@{'/public/javascripts/BroadCastController/broadcast.js'}"></script>
<script type="text/javascript">
$(function(){
	$("#tone").combobox({
		 required:true,
		 method:'get',
		 editable:false,
		 url:$Path+"/admin/dict/getCombobox?dictCode=DR_BROADCAST_TONE",
		 valueField:'id',
		 textField:'text',
		 panelHeight:"auto",
		 onLoadSuccess:function(data){
			 $("#tone").combobox('select',data[0].id);
		 },
	 })
	 $("#speed").combobox({
		 required:true,
		 method:'get',
		 editable:false,
		 url:$Path+"/admin/dict/getCombobox?dictCode=DR_BROADCAST_SPEED",
		 valueField:'id',
		 textField:'text',
		 panelHeight:80,
		 panelHeight:"auto",
		 onLoadSuccess:function(data){
			 $("#speed").combobox('select',data[0].id);
		 },
	 })
})
var $Path='${ctxPath}';
var uuid="${uuid}";
parent.$("#dlg").css('background-color','#ecf1f1')
</script>
</html>